<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Semantic UI Form</title>
<!-- Site Properities -->
<link rel="stylesheet" type="text/css" href="../assets/libs/semantic-ui/semantic.css">
<script src="../assets/libs/jquery.min.js"></script>
<script src="../assets/libs/semantic-ui/semantic.js"></script>
<script type="text/javascript">
$.fn.form.settings.rules["checkUsername"] = function(value) {
    var url = "usermng/checkUsername";
    var res = false;
    $.ajax({
        async : false,
        url : url,
        type : "POST",
        data : {
            username : value
        },
        dataType: "json",
        success: function(data){
            if(data['code']==1){
                res = true;
            }else {
                res = false;
            }
        },
        error:function(){
        	//res=true;
        }
    });
    console.log(res);
    return res;
};

$(function(){
	$('.ui.form')
	.form({
	  name: {
	    identifier  : 'name',
	    rules: [
	      {
	        type   : 'empty',
	        prompt : 'Please enter your name'
	      }
	    ]
	  },
	  gender: {
	    identifier  : 'gender',
	    rules: [
	      {
	        type   : 'empty',
	        prompt : 'Please select a gender'
	      }
	    ]
	  },
	  username: {
	    identifier : 'username',
	    rules: [
	      {
	        type   : 'empty',
	        prompt : 'Please enter a username'
	      },
	      { type : 'checkUsername', prompt : 'Username already existed' }
	    ]
	  },
	  password: {
	    identifier : 'password',
	    rules: [
	      {
	        type   : 'empty',
	        prompt : 'Please enter a password'
	      },
	      {
	        type   : 'length[6]',
	        prompt : 'Your password must be at least 6 characters'
	      }
	    ]
	  },
	  terms: {
	    identifier : 'terms',
	    rules: [
	      {
	        type   : 'checked',
	        prompt : 'You must agree to the terms and conditions'
	      }
	    ]
	  }
	})
	;
});
</script>
</head>
<body>
<form class="ui form segment">
        <p>告诉我们你的信息</p>
        <div class="two fields">
          <div class="field">
            <label>Name</label>
            <input placeholder="名" name="name" type="text">
          </div>
          <div class="field">
            <label>性别</label>
            <div class="ui dropdown selection" tabindex="0"><select name="gender">
              <option value="">性别</option>
              <option value="male">男性</option>
              <option value="female">女性</option>
            </select><i class="dropdown icon"></i><div class="default text">性别</div><div class="menu" tabindex="-1"><div class="item" data-value="male">男性</div><div class="item" data-value="female">女性</div></div></div>
          </div>
        </div>
        <div class="field">
          <label>Username</label>
          <input placeholder="Username" name="username" type="text">
        </div>
        <div class="field">
          <label>Password</label>
          <input type="password" name="password">
        </div>
        <div class="inline field">
          <div class="ui checkbox">
            <input type="checkbox" name="terms">
            <label>我同意上述条款以及条件。</label>
          </div>
        </div>
        <div class="ui blue submit button">Submit</div>
      </form>
</body>
</html>